<template>
	<view>

		<view class="mb-3 flex j-sb a-center bg-white p-3">
			<view class="mb-1">头像</view>
			<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-wrapper">
				<u-avatar :size="60" :src="formData.avatarUrl" shape="circle"></u-avatar>
				<view class="ml-2">
					<u-icon name="arrow-right" color="#888" size="18"></u-icon>
				</view>
			</button>
		</view>
		<view class="bg-white p-3">
			<view class="mb-3 border-bottom-1 pb-3 flex j-sb a-center">
				<view class="mb-1">姓名</view>
				<view class="flex-1 flex j-end a-center">
					<input class="h-70 text-right mr-2" type="nickname" placeholder="请输入姓名" v-model="formData.nickName"
						@blur="blurNick" />
					<u-icon name="arrow-right" color="#888" size="18"></u-icon>
				</view>

			</view>
			<view class="flex j-sb a-center py-1">
				<view class="mb-1">手机号</view>
				<view class="flex-1 flex j-end a-center">
					{{formData.phone}}
				</view>
			</view>
		</view>

		<view class="flex j-center a-center p-3 text-center text-danger bg-white mt-3" @click="handleOut">
			退出登录
		</view>




	</view>
</template>

<script>
	import settings from "@/config/settings";
	import {
		updateNickName,
		updateAvatarUrl
	} from '@/api/login.js'
	export default {
		components: {

		},
		data() {
			return {
				formData: {
					avatarUrl: '',
					nickName: '',
					phone: ''
				},
			}
		},
		computed: {

		},
		onLoad() {
			this.setFormData(this.userInfo)
		},
		methods: {
			handleOut() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: () => {
						uni.clearStorage();
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			},
			setFormData(data) {
				for (const key in this.formData) {
					if (data[key] != null && data[key] != undefined) {
						this.formData[key] = data[key];
					}
				}
				this.avatar = data.avatarUrl
			},
			submit() {

				setInfos(this.formData).then(res => {
					uni.$u.toast('保存成功');
					this.navigateBack()
				})

			},
			blurNick(e) {
				this.formData.nickName = e.detail.value;
				updateNickName({
					nickName: this.formData.nickName
				}).then(res => {
					uni.$u.toast('更新成功');
				})

			},


			// 上传头像
			onChooseAvatar(e) {
				uni.uploadFile({
					url: settings.IS_DEV ? settings.DEV_URL + this.upload : settings.PRO_URL +
						this.upload,
					filePath: e.detail.avatarUrl,
					name: 'files',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					formData: {
						file: e.detail.avatarUrl
					},
					success: (res) => {
						console.log(JSON.parse(res.data))
						this.formData.avatarUrl = JSON.parse(res.data).data;
						updateAvatarUrl({
							avatarUrl: this.formData.avatarUrl
						}).then(res => {
							uni.$u.toast('更新成功');
						})
					}
				});
			},
			onblur() {
				this.formData.birthday = this.getBirthdayByIdNumbe(this.formData.idCard).birthday;
				this.dateTime = this.formData.birthday;
				let sex = this.getBirthdayByIdNumbe(this.formData.idCard).sex;
				this.formData.sex = sex;
			},
			// 根据身份证号得到出生日期、年龄和性别
			getBirthdayByIdNumbe(number) {
				// console.log('身份证号', number)
				// 提取出生日期
				var birthday = number.substring(6, 14);
				var sex = "";
				var year = birthday.substring(0, 4);
				var month = birthday.substring(4, 6);
				var day = birthday.substring(6, 8);
				// 计算年龄
				var myDate = new Date();
				var currentYear = myDate.getFullYear(); // 本年
				var currentMonth = myDate.getMonth() + 1; // 本月
				var currentDay = myDate.getDate(); // 本日
				var age = currentYear - parseInt(year) - 1; // 年龄
				if (
					parseInt(month) < currentMonth ||
					(parseInt(month) == currentMonth && parseInt(day) <= currentDay)
				) {
					age++;
				}
				birthday = year + "-" + month + "-" + day;

				if (number.length === 15) {
					sex = ["女", "男"][number.substr(14, 1) % 2];
				} else if (number.length === 18) {
					sex = ["女", "男"][number.substr(16, 1) % 2];
				}
				return {
					birthday: birthday,
					age: age,
					sex: sex,
				};
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 100;
				} else if (type === 'end') {
					year = year + 1;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.avatar-wrapper {
		background-color: transparent;
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: end;
		align-items: center;

		&::after {
			border: none;
		}
	}
</style>